<template>
  <div class="ward-container">
    <van-nav-bar
      title="我的病房"
      left-arrow
      @click-left="router.back()"
    />

    <template v-if="wardInfo">
      <!-- 病房基本信息 -->
      <van-cell-group inset class="my-4">
        <van-cell title="病房号" :value="wardInfo.wardNo" />
        <van-cell title="病床号" :value="wardInfo.bedNo" />
        <van-cell title="科室" :value="wardInfo.departmentName" />
        <van-cell title="入院时间" :value="formatDateTime(wardInfo.admissionTime)" />
        <van-cell title="预计出院时间" :value="formatDateTime(wardInfo.expectedDischargeTime)" />
        <van-cell title="住院天数" :value="`${wardInfo.stayDays}天`" />
      </van-cell-group>

      <!-- 主治医生信息 -->
      <div class="section-title px-4 py-2">主治医生</div>
      <van-cell-group inset>
        <van-cell :title="wardInfo.doctor.name" :label="wardInfo.doctor.title">
          <template #icon>
            <van-image
              round
              width="40"
              height="40"
              :src="wardInfo.doctor.avatar"
              class="mr-3"
            />
          </template>
        </van-cell>
        <van-cell title="联系电话" :value="wardInfo.doctor.phone" />
        <van-cell title="所属科室" :value="wardInfo.doctor.departmentName" />
      </van-cell-group>

      <!-- 护理信息 -->
      <div class="section-title px-4 py-2">护理信息</div>
      <van-cell-group inset>
        <van-cell title="护理等级" :value="wardInfo.nursingLevel" />
        <van-cell title="责任护士" :value="wardInfo.nurse.name" />
        <van-cell title="联系电话" :value="wardInfo.nurse.phone" />
      </van-cell-group>

      <!-- 费用信息 -->
      <div class="section-title px-4 py-2">费用信息</div>
      <van-cell-group inset>
        <van-cell title="病房费用" :value="`￥${wardInfo.roomFee}/天`" />
        <van-cell title="护理费用" :value="`￥${wardInfo.nursingFee}/天`" />
        <van-cell title="已交押金" :value="`￥${wardInfo.deposit}`" />
        <van-cell title="当前费用" :value="`￥${wardInfo.currentFee}`" />
        <van-cell title="医保报销" :value="`￥${wardInfo.insuranceAmount}`" v-if="wardInfo.insuranceAmount > 0" />
      </van-cell-group>

      <!-- 注意事项 -->
      <div class="section-title px-4 py-2">注意事项</div>
      <van-cell-group inset>
        <van-cell title="探视时间">
          <template #value>
            <div class="text-right">
              <div>上午：{{ wardInfo.visitingHours.morning }}</div>
              <div>下午：{{ wardInfo.visitingHours.afternoon }}</div>
            </div>
          </template>
        </van-cell>
        <van-cell title="禁忌食物">
          <template #value>
            <div class="text-right text-sm text-gray-500">
              {{ wardInfo.dietaryRestrictions.join('、') }}
            </div>
          </template>
        </van-cell>
      </van-cell-group>

      <!-- 紧急呼叫按钮 -->
      <div class="fixed-bottom p-4">
        <van-button 
          type="danger" 
          block 
          icon="volume"
          :loading="callingNurse"
          @click="handleCallNurse"
        >
          呼叫护士
        </van-button>
      </div>
    </template>

    <!-- 无住院信息提示 -->
    <div v-else-if="!loading" class="empty-tip">
      <van-empty description="暂无住院信息" />
    </div>

    <!-- 加载中 -->
    <van-loading v-if="loading" size="24px" vertical class="loading-wrapper">
      加载中...
    </van-loading>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showSuccessToast } from 'vant'
import { getMyWardInfo } from '../api'

const router = useRouter()
const loading = ref(true)
const wardInfo = ref(null)
const callingNurse = ref(false)

const loadWardInfo = async () => {
  try {
    loading.value = true
    const res = await getMyWardInfo()
    wardInfo.value = res
  } catch (error) {
    console.error('获取病房信息失败：', error)
    showToast('获取病房信息失败')
  } finally {
    loading.value = false
  }
}

const handleCallNurse = async () => {
  try {
    callingNurse.value = true
    // TODO: 调用呼叫护士接口
    await new Promise(resolve => setTimeout(resolve, 1000))
    showSuccessToast('已通知护士，请稍候')
  } catch (error) {
    console.error('呼叫失败：', error)
    showToast('呼叫失败，请重试')
  } finally {
    callingNurse.value = false
  }
}

const formatDateTime = (dateTime) => {
  if (!dateTime) return ''
  const date = new Date(dateTime)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  return `${year}-${month}-${day} ${hours}:${minutes}`
}

onMounted(() => {
  loadWardInfo()
})
</script>

<style scoped>
.ward-container {
  min-height: 100vh;
  background-color: var(--background-color);
  padding-bottom: 80px;
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--van-text-color);
}

.empty-tip {
  padding: 40px 0;
}

.loading-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding-bottom: env(safe-area-inset-bottom);
}
</style> 